
export default function BestChoose() {

  const list = [
    {
      key: 1,
      pic: 'best-choose-1.png',
      title: '更轻巧',
      describe: '产品开箱即用，设计简洁优雅，颠覆传统工具体验'
    }, {
      key: 2,
      pic: 'best-choose-2.png',
      title: '易连接',
      describe: '深度融合钉钉，消除数据孤岛，打造一站协作平台'
    }, {
      key: 3,
      pic: 'best-choose-3.png',
      title: '全开放',
      describe: '能力全面开放，支持各类集成，满足企业个性需求'
    }, 
  ]
 

  return (
    <div className="relative w-full bg-white py-32">
      <p className="text-center h-full w-full text-4xl font-sans font-bold py-16">
        企业协同办公的第一选择
      </p>
      <div className="grid grid-cols-3 px-80 justify-items-center">
        {list.map((item) => (
          <div 
            key={item.key}
            className='flex items-center justify-items-center flex-col w-1/2'
          >
            <img src={item.pic} alt="" />
            <p className="text-xl">{item.title}</p>
            <span className="mt-4 pb-20 text-gray-500 text-center">{item.describe}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
